import React, { PropTypes, Component } from 'react';
import Table from './MyTable'
import Column from './Column'
import styles from './TodayDataTable.css';
import { ROOTURL_TABLE } from './../publicAPI/publicAPI';
import fetch from 'isomorphic-fetch';

export default React.createClass({
	getInitialState: function() {
		return {
			tData: [{}],
			allData: [{}],
			nationalData: {},
			hasAlerted: false,
		};
	},

	componentWillMount: function() {
		this.getData();
	},
	componentDidMount: function() {
		let _this = this;

		this.timer = setInterval(_this.getData(), 1800000);
	},
	componentWillUnmount: function() {
		let stop = window.clearInterval(this.timer);
	},
	getData: function() {
		//console.log('getData');
		let _this = this;
		//获取当日数据
		fetch(ROOTURL_TABLE + 'cafune/shop/locshopdaydata.api', { 
		    method: 'GET',
		    headers: { 
		      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" 
		    }, 
		})
		.then((response) => {
			if (response.ok) {
				response.json().then(function(data) {
					//console.log(data);
					var processData = [];
					var ids = data.citys;
					for(var i in ids) {
						let id = ids[i];
						let cityName = {cityName: id}
						Object.assign(data[id], cityName);
						processData.push(data[id]);
					}
					this.setState({
						tData: processData,
						nationalData: data.nationalDayData
					});
				}.bind(_this));
			} else {
				console.log("Looks like the response wasn't perfect, got status", response.status);
			}
		})
		.catch(function (error) {
			alert("获取服务器内容失败");
			console.log('Request failed', error);
		});
		//获取历史总数据
		fetch(ROOTURL_TABLE + 'cafune/shop/allshopdata.api', { 
		    method: 'GET',
		    headers: { 
		      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" 
		    }, 
		})
		.then((response) => {
			if (response.ok) {
				response.json().then(function(data) {
					//console.log(data);
					let processData = [];
					processData.push(data);
					this.setState({allData: processData});
				}.bind(_this));
			} else {
				console.log("Looks like the response wasn't perfect, got status", response.status);
			}
		})
		.catch(function (error) {
			console.log('Request failed', error);
		});
	},
	render: function() {
		return (
			<div className={styles['table-container']}>
				<div className={styles['nationalData-wrap']}>
					{
						this.state.allData.map(function(cityData, index, arr) {
							return (
								<div key={index}>
									<ul>
										<li>历史总数据</li>
										<li>门店数量：{cityData.allShopCount}</li>
										<li>总订单数：{cityData.allShopContractCount}</li>
										<li>总客流量：{cityData.allShopKll}</li>
										<li>总营业额：{parseFloat(cityData.allShopTurnover).toFixed(2)}</li>
									</ul>
								</div>
							);
						})
					}
				</div>
				<div className={styles['content']}>
				<ul>
					<li>全国(当天)</li>
					<li>客流量：{this.state.nationalData.nationalDayKll}</li>
					<li>订单数：{this.state.nationalData.nationalDayContractCount}</li>
					<li>已服务：{this.state.nationalData.nationalDayServedCount}</li>
					<li>已支付：{this.state.nationalData.nationalDayPayedCount}</li>
					<li>总营业额：{this.state.nationalData.nationalDayTurnover}</li>
				</ul>
				</div>
				<div className={styles['div-wrap']}>
					{
						this.state.tData.map(function(cityData, index, arr) {
							return (
								<div className={styles.container} key={cityData.cityName}>
									<div className={styles.content}>
									<ul>
										<li>地区(当天)：{cityData.cityName}</li>
										<li>日客流量：{cityData.dayKll}</li>
										<li>日订单数：{cityData.dayContractCount}</li>
										<li>日服务数：{cityData.dayServedCount}</li>
										<li>已支付：{cityData.dayPayedCount}</li>
										<li>日营业额：{cityData.dayTurnover}</li>
									</ul>
									</div>
								</div>
							);
						})
					}
				</div>
    		</div>
		);
		
	},

});
